<template>
  <div class="loginWaip">
    <el-dialog v-model="dialogVisible" width="30%" class="diagFlag">
      <div>
        <div class="title">实名认证</div>
        <div class="tips">填写正确的信息</div>
        <el-divider></el-divider>

        <el-form ref="form" :model="form" class="formWaip" label-width="120px">
          <el-form-item prop="attestationType" label="认证类型：">
            <el-radio-group v-model="form.attestationType">
              <el-radio :label="0">个人</el-radio>
              <el-radio :label="1">机构</el-radio>
            </el-radio-group>
          </el-form-item>

          <div v-if="form.attestationType=='0'">
            <el-form-item prop="realName" label="真实姓名：" :rules="{
      required: true, message: '真实姓名不能为空', trigger: 'blur'
    }">
              <el-input v-model="form.realName" placeholder="请输入真实姓名">
              </el-input>
            </el-form-item>
            <el-form-item prop="cardId" label="身份证号码：" :rules="{
      required: true, message: '身份证号码不能为空', trigger: 'blur'
    }">
              <el-input v-model="form.cardId" placeholder="请输入身份证号码">
              </el-input>
            </el-form-item>
          </div>

          <div v-else>

            <el-form-item prop="companyName" label="公司名称：" :rules="{
      required: true, message: '公司名称不能为空', trigger: 'blur'
    }">
              <el-input v-model="form.companyName" placeholder="请输入公司名称">
              </el-input>
            </el-form-item>
            <el-form-item prop="realName" label="公司法人姓名：" :rules="{
      required: true, message: '公司法人姓名不能为空', trigger: 'blur'
    }">
              <el-input v-model="form.realName" placeholder="请输入公司法人姓名">
              </el-input>
            </el-form-item>
            <el-form-item prop="businessLicense" label="营业执照编码：" :rules="{
      required: true, message: '营业执照编码不能为空', trigger: 'blur'
    }">
              <el-input v-model="form.businessLicense" placeholder="请输入营业执照编码">
              </el-input>
            </el-form-item>
          </div>

          <el-form-item prop="attestationInformation" label="* 认证资料：">
            <!--                <el-input v-model="form.attestationInformation" placeholder="请输入认证资料" type="textarea"></el-input>-->

            <!--                      <div class="upload_img">-->
            <!--                            -->

            <!--                            <div class="back_img">-->
            <!--                                <div class="up_img" v-if="imageUrl != '' "-->
            <!--                                     :style="{background:'url('+imageUrl+') 100% 100% no-repeat'}"></div>-->
            <!--                                <div v-else class="iconfont icon-yunshangchuan2 up_icon"></div>-->
            <!--                            </div>-->

            <!--                      </div>-->

            <el-upload
                class="avatar-uploader"

                list-type="picture"
                :show-file-list="true"
                :limit="1"
                :auto-upload="true"
                :http-request="upload"
                :on-remove="onRemove"
            >
              <i class="iconfont icon-add" style="font-size: 30px;"></i>
            </el-upload>

          </el-form-item>


          <el-form-item>
            <el-button plain type="primary" @click="submitForm" size="mini">&emsp;提交&emsp;</el-button>
          </el-form-item>

        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {UserToAuthor, UserInfoDetail, UpLoadImg} from "@/api/UserInfo";
import {CheckPersonal, CheckCompany, SendSms, CheckPhoneCode} from "@/api/Certification";
import {setUserInfo} from "@/utils/auth";
import baseConfig from "@/utils/config"
import {AdaMemberCreate} from "../../api/UserInfo";

export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        attestationType: 0,
      },
      loginFlag: true,
      rules: {},
      authorAll: false,
      imageUrl: '',
      codeMsg: '发送验证码',
      canClick: true,
      totalTime: 60,

      isUpImg:false,

    };
  },
  computed: {},
  watch: {
    form: {
      handler(val) {
        if (this.form.password && this.form.phone)
          this.loginAll = true;
        else
          this.loginAll = false;
      },
      deep: true,
    },
    dialogVisible(nv) {
      if (!nv)
        this.resetForm()
    }
  },
  methods: {

    sendCode() {
      if (!this.form.phone) {
        this.$message.warning("请输入电话号码");
        return false;
      }

      if (!this.canClick) return false;
      this.canClick = false;
      SendSms({receive: this.form.phone}).then((res) => {
        console.log("发送短信返回的数据", res)
        if (res.data.value.code == 200) {
          this.$message.success("短信发送成功");
          this.codeMsg = this.totalTime + "s";
          let clock = setInterval(() => {
            this.totalTime--;
            this.codeMsg = this.totalTime + "s";
            if (this.totalTime < 0) {
              window.clearInterval(clock);
              this.codeMsg = "重新发送";
              this.totalTime = 60;
              this.canClick = true;
            }
          }, 1000);
        } else {
          this.canClick = true;
          this.$message.error(res.data.value.msg);
        }
      });
    },

    upload(params) {
      console.log('上传文件为', params)
      UpLoadImg(params).then(res => {
        console.log('上传图片结果为', res)
        if (res.code == 0) {
          this.isUpImg=true
          this.imageUrl = baseConfig.dev + '' + res.data[0]
        } else {
          this.$message.error(res.data)
        }
      })
    },
    onRemove(file, fileList){
        this.isUpImg=false
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {

          // if (!this.form.code) {
          //     this.$message.error("请输入验证码");
          //     return false;
          // }

          if( this.isUpImg == false ){
            this.$message.warning('请提交认证资料')
            return
          }

          if (this.form.attestationType == 0) {
            CheckPersonal({name: this.form.realName, idcard: this.form.cardId}).then((res) => {
              console.log('个人审核结果', res)
              if ((res.data.value.code == '200') && (res.data.value.data.desc != '不一致')) {
                this.userToAuthor()
              } else {
                // this.$message.error(res.data.value.msg)
                this.$message.error('请输入合法的身份信息')
              }
            })
          } else {
            CheckCompany({
              companyName: this.form.companyName,
              legalPerson: this.form.realName,
              creditNo: businessLicense,
            }).then((res) => {
              console.log('企业审核结果', res)
              if ((res.data.value.code == '200') && (res.data.value.data.desc != '不一致')) {
                this.userToAuthor()
              } else {
                // this.$message.error(res.data.value.msg)
                this.$message.error('请输入合法的身份信息')
              }
            })
          }

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    userToAuthor() {
      console.log('this.isupimg',this.isUpImg)
      if( this.isUpImg == false ){
        this.$message.warning('请提交认证资料')
        return
      }

      this.form.attestationInformation = this.imageUrl
      console.log('提交之前的数据', this.form)
      UserToAuthor(this.form).then((res) => {
        console.log('提交后返回回来的数据', res)
        this.$message.success('审核成功')

        //成为作者后调用
        AdaMemberCreate(null).then(res => {

        })

        UserInfoDetail().then((res1) => {
          setUserInfo(res1.data);
          this.$store.commit("setUser", res1.data);
          console.log('成为作者后的个人信息', res1.data)

          // setTimeout(() => {
          //   window.location.reload();
          // }, 500);

        });
      });
    },
    resetForm() {
      this.$refs["form"].resetFields();
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('Avatar picture must be JPG format!')
      }
      if (!isLt2M) {
        this.$message.error('Avatar picture size can not exceed 2MB!')
      }
      return isJPG && isLt2M
    },

  },
};
</script>
<style lang="scss" scoped>
.loginWaip {
  overflow: hidden;

  ::v-deep {
    .el-dialog__body {
      padding: 0;
      padding-bottom: 20px;
    }
  }

  .title {
    font-size: 20px;
    font-weight: bold;
    color: #111111;
    text-align: center;
  }

  .tips {
    color: #999999;
    font-size: 12px;
    text-align: center;
  }

  .formWaip {
    width: 70%;
    margin: 0 auto;
  }
}

.upload_img {
  position: relative;
  width: 100%;
  height: 78px;

  ::v-deep {
    .avatar-uploader .el-upload {
      border: 1px solid #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 11;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 78px;
      height: 78px;
      text-align: center;
      z-index: 12;
    }

    .avatar-uploader-icon svg {
      margin-top: 74px; /* (178px - 28px) / 2 - 1px */
    }

    .avatar {
      width: 78px;
      height: 78px;
      display: block;
    }
  }

  .back_img {
    width: 100%;
    height: 78px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .up_img {
    width: 100%;
    height: 100%;

  }

  .up_icon {
    font-size: 50px;
    line-height: 50px;
  }

}

.disflex {
  ::v-deep {
    .el-form-item__content {
      display: flex;

      button {
        width: 130px !important;
        margin-left: 20px;
        padding: 12px 0 !important;
        font-size: 14px;
        color: #fff;
        background: #2EB0C6;
      }
    }
  }
}

</style>
